<!DOCTYPE html>
<html>
<head>
    <title>服刑人员斗殴事件处置</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console3.css') }}"/>

    <!-- 主 题 更 换 -->
    <style id="pearadmin-bg-color"></style>

</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
<!--        <div class="layui-col">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">监所信息</div>-->
<!--                <div class="layui-card-body">-->
<!--                    <div id="echarts-pie1" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">监所地点斗殴概率信息</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-pie2" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">摄像头监控情况统计</div>
                <div class="layui-card-body">
                    <table id="building-table" lay-filter="building-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md11">
            <div class="layui-card">
                <div class="layui-card-header">斗殴事件时间统计</div>
                <div class="layui-card-body1">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-tree" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
            <!--<div class="layui-card">
                <div class="layui-card-header">
                    楼栋数据
                </div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-bar" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>-->
        </div>
    </div>
</div>
<!--</div>-->

{% include 'admin/common/footer.html' %}
<script>

    //监所信息
    layui.use(['echarts'], function () {

        var echarts = layui.echarts
        var chartDom = document.getElementById('echarts-pie1');
        var myChart = echarts.init(chartDom);
        var option

        option = {
            angleAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            radiusAxis: {},
            polar: {},
            series: [
                {
                    type: 'bar',
                    data: [1, 2, 3, 4, 3, 5, 1],
                    coordinateSystem: 'polar',
                    name: 'A',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    type: 'bar',
                    data: [2, 4, 6, 1, 3, 2, 1],
                    coordinateSystem: 'polar',
                    name: 'B',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    type: 'bar',
                    data: [1, 2, 3, 4, 1, 2, 5],
                    coordinateSystem: 'polar',
                    name: 'C',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                }
            ],
            legend: {
                show: true,
                data: ['A', 'B', 'C']
            }
        };

        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })

    //监所信息
    layui.use(['echarts'], function () {

        var echarts = layui.echarts
        var chartDom = document.getElementById('echarts-pie2');
        var myChart = echarts.init(chartDom);
        var option

        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                data: [
                    '监舍',
                    '洗漱间',
                    '食堂',
                    '操场',
                    '教育改造处',
                    '劳动改造处',
                    '卫生处',
                    '沟通处',
                    '刑罚处',
                    'Others'
                ]
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],
                    label: {
                        position: 'inner',
                        fontSize: 14
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1548, name: '食堂' },
                        { value: 775, name: '监舍' },
                        { value: 679, name: '洗漱间', selected: true }
                    ]
                },
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['45%', '60%'],
                    labelLine: {
                        length: 30
                    },
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#6E7079',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4
                            }
                        }
                    },
                    data: [
                        { value: 1048, name: '卫生处' },
                        { value: 335, name: '监舍' },
                        { value: 310, name: '操场' },
                        { value: 251, name: '沟通处' },
                        { value: 234, name: '教育改造处' },
                        { value: 147, name: '刑罚处' },
                        { value: 135, name: '劳动改造处' },
                        { value: 102, name: 'Others' }
                    ]
                }
            ]
        };
        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })

    //楼宇情况统计
    layui.use(['table', 'form', 'jquery', 'popup', 'common'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let popup = layui.popup
        let common = layui.common
        let MODULE_PATH = '/admin/earth/'

        // 表格数据
        let cols = [
            [
                { title: '楼栋名称', field: 'Name', align: 'center', width: 100 },
                { title: '总人数', field: 'Num', align: 'center', width: 80},
                { title: '总负责人', field: 'People1', align: 'center', width: 100},
                { title: '指挥小组成员', field: 'People2', align: 'center'},
            ]
        ]

        // 渲染表格数据
        table.render({
            elem: '#building-table',
            url: MODULE_PATH + 'building',
            page: true,
            cols: cols,
            skin: 'line',
            height: 'full-148',
            toolbar: '#user-toolbar', /*工具栏*/
            text: { none: '暂无信息' },
            defaultToolbar: [{ layEvent: 'refresh', icon: 'layui-icon-refresh' }, 'filter', 'print', 'exports'] /*默认工具栏*/
        })


        //
        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })


        form.on('submit(user-query)', function (data) {
            window.refresh(data.field)
            return false
        })

        form.on('switch(user-enable)', function (obj) {
            let operate
            if (obj.elem.checked) {
                operate = 'enable'
            } else {
                operate = 'disable'
            }
            let loading = layer.load()
            $.ajax({
                url: '/admin/user/' + operate,
                data: JSON.stringify({ userId: this.value }),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    layer.close(loading)
                    if (result.success) {
                        popup.success(result.msg)
                    } else {
                        popup.failure(result.msg)
                    }
                }
            })
        })


        window.refresh = function (param) {
            table.reload('building-table', { where: param })
        }
    })

    //人员进出统计
    layui.use(['echarts'], function () {

        var echarts = layui.echarts
        var chartDom = document.getElementById('echarts-tree');
        var myChart = echarts.init(chartDom);
        var option

        // prettier-ignore
        const hours = [
            '12a', '1a', '2a', '3a', '4a', '5a', '6a',
            '7a', '8a', '9a', '10a', '11a',
            '12p', '1p', '2p', '3p', '4p', '5p',
            '6p', '7p', '8p', '9p', '10p', '11p'
        ];
        // prettier-ignore
        const days = [
            'Saturday', 'Friday', 'Thursday',
            'Wednesday', 'Tuesday', 'Monday', 'Sunday'
        ];
        // prettier-ignore
        const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
            .map(function (item) {
                return [item[1], item[0], item[2]];
            });
        option = {
            title: {
                text: ''
            },
            legend: {
                data: ['Punch Card'],
                left: 'right'
            },
            tooltip: {
                position: 'top',
                formatter: function (params) {
                    return (
                        params.value[2] +
                        ' fights in ' +
                        hours[params.value[0]] +
                        ' of ' +
                        days[params.value[1]]
                    );
                }
            },
            grid: {
                left: 2,
                bottom: 10,
                right: 10,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: hours,
                boundaryGap: false,
                splitLine: {
                    show: true
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: days,
                axisLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Punch Card',
                    type: 'scatter',
                    symbolSize: function (val) {
                        return val[2] * 2;
                    },
                    data: data,
                    animationDelay: function (idx) {
                        return idx * 5;
                    }
                }
            ]
        };

        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })

    //楼栋情况
    layui.use(['echarts'], function () {
        var echarts = layui.echarts

        var chartDom = document.getElementById('echarts-bar');
        var myChart = echarts.init(chartDom);
        var option
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: ['楼1', '楼2', '楼3', '楼4', '楼5', '楼6', '楼7']
            },
            series: [
                {
                    name: '犯人人数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 302, 301, 334, 390, 330, 100]
                },
                {
                    name: '层数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [5, 5, 8, 7, 6, 6, 6]
                },
                {
                    name: '巡逻警员数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [20, 25, 28, 26, 26, 25, 26]
                },
                {
                    name: '出口入口数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [5, 10, 10, 10, 10, 10, 5]
                }
            ]
        };

        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })
</script>
</body>
</html>